<!-- 动态图片 -->
<template>
    <view class="square-item-img" :class="'square-item-img' + (props.imgList.length > 3 ? 3 : props.imgList.length)" @click="photoView()">
        <van-image fit="cover" class="square-item-img-item" :src="item.Path" v-for="(item, i) in props.imgList"
            :key="item.ID" />
        <view class="square-item-img-tips" v-if="props.imgList.length > 3">
            <img src="@/assets/image/icon19.png" alt="">
            <text>{{ props.imgList.length }}张</text>
        </view>
    </view>
    <van-image-preview v-model:show="state.show" :images="state.images" teleport="body">
         <!-- <template v-slot:index>第页</template> -->
         <template #image="{ src }">
            <van-image class="my-swipe-inner-layer-img" :src="src"
               fit="contain" />
         </template>
      </van-image-preview>
</template>
    
<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from "vue"
import { onLoad } from '@dcloudio/uni-app'

const emits = defineEmits(['on-praise'])

const props = defineProps(['imgList','itemId'])

const state = reactive({
    imgList: props.imgList,
    userId:"",
    show: false
})

onLoad((options) => {
    state.userId = options.userId
})

const showImg = () => {
   state.images = props.imgList.map(o => o.Path)
   state.show = true
}

// 查看图片
const photoView = () => {
    if(state.userId){
        showImg()
        return
    }
    uni.navigateTo({
        url: '/pages/swriperPage/index?id='+props.itemId
    })
}

// const

</script>
    
<style lang="scss" scoped>
.square-item-img-item {
    display: none !important;
}

.square-item-img {
    .square-item-img-item {
        border-radius: 16rpx;
        overflow: hidden;
        display: block;
    }
}

.square-item-img1 {
    .square-item-img-item {
        width: 50%;
    }

    .square-item-img-item:nth-child(1) {
        display: block !important;
    }
}

.square-item-img2 {
    display: flex;

    .square-item-img-item {
        width: calc(50% - 7rpx);
        height: 384rpx;
    }

    .square-item-img-item:nth-child(1) {
        margin-right: 14rpx;
    }

    .square-item-img-item:nth-child(1),
    .square-item-img-item:nth-child(2) {
        display: block !important;
    }
}

.square-item-img3 {
    position: relative;
    display: block;

    .square-item-img-item:nth-child(1) {
        width: 468rpx;
        height: 468rpx;
    }

    .square-item-img-item:nth-child(1),
    .square-item-img-item:nth-child(2),.square-item-img-item:nth-child(3) {
        display: block !important;
    }

    .square-item-img-item:nth-child(2),
    .square-item-img-item:nth-child(3) {
        width: 214rpx;
        height: 214rpx;
        position: absolute;
        top: 0;
        right: 0;
    }

    .square-item-img-item:nth-child(3) {
        top: auto;
        bottom: 0;
    }

    .square-item-img-tips {
        position: absolute;
        background: rgba(0, 0, 0, .5);
        color: #fff;
        right: 16rpx;
        bottom: 16rpx;
        display: flex;
        align-items: center;
        padding: 4rpx 8rpx;

        img {
            width: 20rpx
        }

        text {
            margin-left: 5rpx;
        }
    }
}
</style>
    